<template>
    <div>
      <SchemaForm
        ref="schemaFormRef"
        v-bind="{ ...getFormProps }"
        class="bg-white dark:bg-#212332 mb-16px"
      >
      </SchemaForm>
      <a-tabs type="card" class="h-full w-full">
        <a-tab-pane key="1" tab="起草节点" forceRender>
          <a-form layout="horizontal" :labelCol="{ span: 4 }">
          <a-form-item label="按钮权限">
            <a-row class="mt-5px">
              <a-col :span="6"
                ><a-checkbox v-model:checked="startStates.selectedAll"
                  >全选/全不选</a-checkbox
                ></a-col
              >
            </a-row>
            <Tree
              class="mt-5px"
              checkable
              v-model:checkedKeys="startStates.checkedKeys"
              v-model:expandedKeys="startStates.expandedKeys"
              auto-expand-parent
              :selectable="false"
              :tree-data="defaultData.startAll"
            >
            </Tree>
          </a-form-item>
        </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" tab="审批节点" forceRender>
          <a-form layout="horizontal" :labelCol="{ span: 4 }">
            <a-form-item label="按钮权限">
            <a-row class="mt-5px">
              <a-col :span="6"
                ><a-checkbox v-model:checked="runStates.selectedAll"
                  >全选/全不选</a-checkbox
                ></a-col
              >
            </a-row>
            <Tree
              class="mt-5px"
              checkable
              v-model:checkedKeys="runStates.checkedKeys"
              v-model:expandedKeys="runStates.expandedKeys"
              auto-expand-parent
              :selectable="false"
              :tree-data="defaultData.runAll"
            >
            </Tree>
          </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="3" tab="历史节点" forceRender>
          <a-form layout="horizontal" :labelCol="{ span: 4 }">
          <a-form-item label="按钮权限">
            <a-row class="mt-5px">
              <a-col :span="6"
                ><a-checkbox v-model:checked="hisStates.selectedAll"
                  >全选/全不选</a-checkbox
                ></a-col
              >
            </a-row>
            <Tree
              class="mt-5px"
              checkable
              v-model:checkedKeys="hisStates.checkedKeys"
              v-model:expandedKeys="hisStates.expandedKeys"
              auto-expand-parent
              :selectable="false"
              :tree-data="defaultData.hisAll"
            >
            </Tree>
          </a-form-item>
        </a-form>
        </a-tab-pane>
      </a-tabs>
    </div>
  </template>
  
  <script lang="tsx" setup>
    import { onMounted, reactive, ref, watch } from 'vue';
    import { Tag, Tree,Select,Input } from 'ant-design-vue';
    import { SchemaForm } from '@/components/core/schema-form';
    import { useActionTempSchema } from '@/views/system/actionTemp/formSchemas';
    const { Option } = Select;
  
    interface Props {
      defaultData?: any;
    }
  
    const props = withDefaults(defineProps<Props>(), {
      defaultData: {
        tempData: {},
        startData: [],
        runData: [],
        hisData: [],
        startAll: [],
        startKeysAll: [],
        runAll: [],
        runKeysAll: [],
        hisAll: [],
        hisKeysAll: [],
      },
    });
  
    defineOptions({
      name: 'OperActionTemp',
    });
    //审核时
    const runStates = reactive({
      checkedKeys: [],
      // 折叠展开
      toggle: false,
      //全选
      selectedAll: false,
      //当前展开节点
      expandedKeys: [],
    });
    //起草时
    const startStates = reactive({
      checkedKeys: [],
      // 折叠展开
      toggle: false,
      //全选
      selectedAll: false,
      //当前展开节点
      expandedKeys: [],
    });
    //历史时
    const hisStates = reactive({
      checkedKeys: [],
      // 折叠展开
      toggle: false,
      //全选
      selectedAll: false,
      //当前展开节点
      expandedKeys: [],
    });
  
    const schemaFormRef = ref<any>(null);
  
    const getFormProps = ref({
      layout: 'horizontal',
      labelWidth: 100,
      schemas: useActionTempSchema(),
      showActionButtonGroup: false,
    });
  
    watch(
      () => props.defaultData,
      (newVal) => {
        console.log(props.defaultData);
        startStates.checkedKeys = newVal?.startData ?? [];
        runStates.checkedKeys = newVal?.runData ?? [];
        hisStates.checkedKeys = newVal?.hisData ?? [];
      },
      {
        deep: true,
      },
    );
  
    watch(
      () => startStates.selectedAll,
      (newVal) => {
        startStates.checkedKeys = newVal ? props.defaultData.startKeysAll : [];
      },
    );
  
    watch(
      () => runStates.selectedAll,
      (newVal) => {
        runStates.checkedKeys = newVal ? props.defaultData.runKeysAll : [];
      },
    );
    watch(
      () => hisStates.selectedAll,
      (newVal) => {
        hisStates.checkedKeys = newVal ? props.defaultData.hisKeysAll : [];
      },
    );
    //父页面调用，保存勾选的数据
    const onSubMit = async () => {
      const result = await schemaFormRef.value?.validate();
      return {
        hisTimeData: hisStates.checkedKeys,
        runTimeData: runStates.checkedKeys,
        startTimeDate: startStates.checkedKeys,
        name: result.name,
        id: result.id,
      };
    };
    //将方法暴漏出来，使父页面可调用
    defineExpose({
      handleSubmit: onSubMit,
    });
  
    onMounted(() => {
      schemaFormRef.value?.setFieldsValue({
        ...props.defaultData.tempData,
      });
    });
  </script>
  